<template>
    <div class="repair">
        <div class="my-header"></div>
        <van-form show-error scroll-to-error label-width="27vw" @submit="onSubmit" @failed="onFailed">
            <div class="form-box">
                <template v-if="route.query.type == '行政审批科'">
                    <!-- <van-field readonly label="评价" left-icon="coupon" center /> -->
                    <van-field readonly label="服务态度" required center class="field-title" />
                    <van-field name="e_ex1" label="" :rules="[{ required: true, message: '请选择服务态度' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex1">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="办事效率" required center class="field-title" />
                    <van-field name="e_ex2" label="" :rules="[{ required: true, message: '请选择办事效率' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex2">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="廉洁自律" required center class="field-title" />
                    <van-field name="e_ex3" label="" :rules="[{ required: true, message: '请选择廉洁自律' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex3">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        readonly
                        label="工作人员有无收受现金（红包）、礼物、礼品或接受吃请？"
                        required
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field
                        name="e_ex4"
                        label=""
                        :rules="[
                            { required: true, message: '请选择工作人员有无收受现金（红包）、礼物、礼品或接受吃请？' },
                        ]"
                    >
                        <template #input>
                            <van-radio-group v-model="formData.e_ex4" @change="e_ex4Change">
                                <van-radio v-for="(item, index) in columns2" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        v-if="formData.e_ex4 == '有'"
                        readonly
                        label="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field
                        v-if="formData.e_ex4 == '有'"
                        v-model="formData.e_ex5"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex5"
                        label=""
                        placeholder="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                    />

                    <van-field readonly label="其他意见和建议" required center class="field-title" label-width="80vw" />
                    <van-field
                        v-model="formData.e_ex6"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex6"
                        label=""
                        placeholder="其他意见和建议"
                        :rules="[
                            {
                                required: true,
                                message: '请输入其他意见和建议',
                            },
                        ]"
                    />

                    <van-field readonly label="评价人姓名" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex7" name="e_ex7" label="" placeholder="评价人姓名" />

                    <van-field readonly label="联系号码" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex8" type="digit" name="e_ex8" label="" placeholder="联系号码" />
                </template>
                <template v-if="route.query.type == '殡管所'">
                    <!-- <van-field readonly label="评价" left-icon="coupon" center /> -->
                    <van-field readonly label="服务态度" required center class="field-title" />
                    <van-field name="e_ex1" label="" :rules="[{ required: true, message: '请选择服务态度' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex1">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="监管力度" required center class="field-title" />
                    <van-field name="e_ex9" label="" :rules="[{ required: true, message: '请选择监管力度' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex9">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="处置效率" required center class="field-title" />
                    <van-field name="e_ex10" label="" :rules="[{ required: true, message: '请选择处置效率' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex10">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="廉洁自律" required center class="field-title" />
                    <van-field name="e_ex3" label="" :rules="[{ required: true, message: '请选择廉洁自律' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex3">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        readonly
                        label="工作人员有无收受现金（红包）、礼物、礼品或接受吃请？"
                        required
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field
                        name="e_ex4"
                        label=""
                        :rules="[
                            { required: true, message: '请选择工作人员有无收受现金（红包）、礼物、礼品或接受吃请？' },
                        ]"
                    >
                        <template #input>
                            <van-radio-group v-model="formData.e_ex4" @change="e_ex4Change">
                                <van-radio v-for="(item, index) in columns2" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        v-if="formData.e_ex4 == '有'"
                        readonly
                        label="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field
                        v-if="formData.e_ex4 == '有'"
                        v-model="formData.e_ex5"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex5"
                        label=""
                        placeholder="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                    />

                    <van-field readonly label="其他意见和建议" required center class="field-title" label-width="80vw" />
                    <van-field
                        v-model="formData.e_ex6"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex6"
                        label=""
                        placeholder="其他意见和建议"
                        :rules="[
                            {
                                required: true,
                                message: '请输入其他意见和建议',
                            },
                        ]"
                    />

                    <van-field readonly label="评价人姓名" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex7" name="e_ex7" label="" placeholder="评价人姓名" />

                    <van-field readonly label="联系号码" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex8" type="digit" name="e_ex8" label="" placeholder="联系号码" />
                </template>
                <template v-if="route.query.type == '殡仪馆'">
                    <!-- <van-field readonly label="评价" left-icon="coupon" center /> -->
                    <van-field readonly label="遗体接运" center class="field-title" />
                    <van-field name="e_ex11" label="">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex11">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="业务接待" center class="field-title" />
                    <van-field name="e_ex12" label="">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex12">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="遗体守灵" center class="field-title" />
                    <van-field name="e_ex13" label="">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex13">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="遗体告别" center class="field-title" />
                    <van-field name="e_ex14" label="">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex14">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="遗体火化" center class="field-title" />
                    <van-field name="e_ex15" label="">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex15">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="工作态度" required center class="field-title" />
                    <van-field name="e_ex16" label="" :rules="[{ required: true, message: '请选择工作态度' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex16">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="环境卫生" center class="field-title" />
                    <van-field name="e_ex17" label="">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex17">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        readonly
                        label="工作人员有无收受现金（红包）、礼物、礼品或接受吃请？"
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field name="e_ex4" label="">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex4" @change="e_ex4Change">
                                <van-radio v-for="(item, index) in columns2" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        v-if="formData.e_ex4 == '有'"
                        readonly
                        label="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field
                        v-if="formData.e_ex4 == '有'"
                        v-model="formData.e_ex5"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex5"
                        label=""
                        placeholder="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                    />

                    <van-field readonly label="其他意见和建议" center class="field-title" label-width="80vw" />
                    <van-field
                        v-model="formData.e_ex6"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex6"
                        label=""
                        placeholder="其他意见和建议"
                    />

                    <van-field readonly label="评价人姓名" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex7" name="e_ex7" label="" placeholder="评价人姓名" />

                    <van-field readonly label="联系号码" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex8" type="digit" name="e_ex8" label="" placeholder="联系号码" />
                </template>
                <template v-if="route.query.type == '乡镇街道殡改工作人员'">
                    <!-- <van-field readonly label="评价" left-icon="coupon" center /> -->
                    <van-field readonly label="乡镇/街道" required center class="field-title" />
                    <van-field name="e_ex18" label="" :rules="[{ required: true, message: '请选择乡镇/街道' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex18">
                                <van-radio v-for="(item, index) in columns3" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="服务态度" required center class="field-title" />
                    <van-field name="e_ex1" label="" :rules="[{ required: true, message: '请选择服务态度' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex1">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="监管力度" required center class="field-title" />
                    <van-field name="e_ex9" label="" :rules="[{ required: true, message: '请选择监管力度' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex9">
                                <van-radio v-for="(item, index) in columns2" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="政策宣传" required center class="field-title" />
                    <van-field name="e_ex19" label="" :rules="[{ required: true, message: '请选择政策宣传' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex19">
                                <van-radio v-for="(item, index) in columns2" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field readonly label="廉洁自律" required center class="field-title" />
                    <van-field name="e_ex3" label="" :rules="[{ required: true, message: '请选择廉洁自律' }]">
                        <template #input>
                            <van-radio-group v-model="formData.e_ex3">
                                <van-radio v-for="(item, index) in columns1" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        readonly
                        label="工作人员有无收受现金（红包）、礼物、礼品或接受吃请？"
                        required
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field
                        name="e_ex4"
                        label=""
                        :rules="[
                            { required: true, message: '请选择工作人员有无收受现金（红包）、礼物、礼品或接受吃请？' },
                        ]"
                    >
                        <template #input>
                            <van-radio-group v-model="formData.e_ex4" @change="e_ex4Change">
                                <van-radio v-for="(item, index) in columns2" :key="'0-' + index" :name="item.value">
                                    {{ item.text }}
                                </van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>

                    <van-field
                        readonly
                        label="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                        center
                        class="field-title"
                        label-width="80vw"
                    />
                    <van-field
                        v-model="formData.e_ex5"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex5"
                        label=""
                        placeholder="请您列明哪一位同志在哪个环节收受现金（红包）、礼物、礼品的具体金额、数量或接受吃请的时间、地点。"
                    />

                    <van-field readonly label="其他意见和建议" required center class="field-title" label-width="80vw" />
                    <van-field
                        v-model="formData.e_ex6"
                        type="textarea"
                        rows="3"
                        autosize
                        name="e_ex6"
                        label=""
                        placeholder="其他意见和建议"
                        :rules="[
                            {
                                required: true,
                                message: '请输入其他意见和建议',
                            },
                        ]"
                    />

                    <van-field readonly label="评价人姓名" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex7" name="e_ex7" label="" placeholder="评价人姓名" />

                    <van-field readonly label="联系号码" center class="field-title" label-width="80vw" />
                    <van-field v-model="formData.e_ex8" type="digit" name="e_ex8" label="" placeholder="联系号码" />
                </template>
            </div>
            <FixedButton native-type="submit">提交</FixedButton>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
    import type { Ref, Raw } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { useStore } from '@/store';
    import FixedButton from '@/components/fixedButton/FixedButton.vue';
    import FieldPopupPicker from '@/components/fieldPopupPicker/FieldPopupPicker.vue';
    import { saveEvaluateApi } from '@/apis';
    import { isPhone, compressImg, isCardID, getSex, getAge } from '@/utils';
    import { json } from 'stream/consumers';

    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    // const isReadonly: boolean = route.query?.sh_id ? true : false;
    const columns1: Ref<any[]> = ref([
        { text: '非常满意', value: '非常满意' },
        { text: '满意', value: '满意' },
        { text: '一般', value: '一般' },
        { text: '差', value: '差' },
    ]);
    const columns2: Ref<any[]> = ref([
        { text: '有', value: '有' },
        { text: '无', value: '无' },
    ]);
    const columns3: Ref<any[]> = ref([
        { text: '柳市镇', value: '柳市镇' },
        { text: '北白象镇', value: '北白象镇' },
        { text: '虹桥镇', value: '虹桥镇' },
        { text: '磐石镇', value: '磐石镇' },
        { text: '淡溪镇', value: '淡溪镇' },
        { text: '蒲岐镇', value: '蒲岐镇' },
        { text: '南岳镇', value: '南岳镇' },
        { text: '清江镇', value: '清江镇' },
        { text: '南塘镇', value: '南塘镇' },
        { text: '芙蓉镇', value: '芙蓉镇' },
        { text: '雁荡镇', value: '雁荡镇' },
        { text: '湖雾镇', value: '湖雾镇' },
        { text: '大荆镇', value: '大荆镇' },
        { text: '仙溪镇', value: '仙溪镇' },
        { text: '乐成街道', value: '乐成街道' },
        { text: ' 城东街道', value: ' 城东街道' },
        { text: '城南街道', value: '城南街道' },
        { text: '盐盆街道', value: '盐盆街道' },
        { text: '翁垟街道', value: '翁垟街道' },
        { text: '白石街道', value: '白石街道' },
        { text: '石帆街道', value: '石帆街道' },
        { text: '天成街道', value: '天成街道' },
        { text: '岭底乡', value: '岭底乡' },
        { text: '智仁乡', value: '智仁乡' },
        { text: '龙西乡', value: '龙西乡' },
    ]);

    const formData: Ref<any> = ref({
        e_ex1: '',
        e_ex2: '',
        e_ex3: '',
        e_ex4: '',
        e_ex5: '',
        e_ex6: '',
        e_ex7: '',
        e_ex8: '',
        e_ex9: '',
        e_ex10: '',
        e_ex11: '',
        e_ex12: '',
        e_ex13: '',
        e_ex14: '',
        e_ex15: '',
        e_ex16: '',
        e_ex17: '',
        e_ex18: '',
        e_ex19: '',
        e_ex20: route.query?.type,
    });

    onBeforeMount(async () => {});
    const e_ex4Change = (val) => {
        console.log(val);
        console.log(formData.value.e_ex4);
        if (formData.value.e_ex4 == '无') {
            formData.value.e_ex5 = '';
        }
    };
    const onFailed = (value) => {
        showDialog({
            // teleport: '.repair',
            title: '提示',
            message: value.errors[0].message,
        });
    };
    const onSubmit = async (value) => {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0,
        });
        console.log(formData.value);
        let mydata = JSON.parse(JSON.stringify(formData.value));
        saveEvaluateApi({
            data: escape(JSON.stringify(mydata)),
        })
            .then((res: any) => {
                console.log(res);
                console.log(JSON.stringify(res));
                closeToast();
                if (res.status == '+OK') {
                    showDialog({
                        // teleport: '.repair',
                        title: '提示',
                        message: res.msg,
                    }).then(() => {
                        router.go(-1);
                    });
                } else {
                    showDialog({
                        // teleport: '.repair',
                        title: '提示',
                        message: res.msg,
                    });
                }
            })
            .catch((err) => {
                closeToast();
                showDialog({
                    // teleport: '.repair',
                    title: '提示',
                    message: '网络异常，请稍后重试！',
                });
            });
    };
</script>
<style lang="scss" scoped>
    .repair {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background-image: url('@/assets/img/bg/bg10.png');
        background-size: 100% 100%;
    }
    .my-header {
        display: flex;
        justify-content: center;
        background: url(@/assets/img/policy/policybg.png) no-repeat;
        background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .my-header::after {
        content: '';
        width: 95%;
        height: 185px;
        margin-top: 20px;
        background: url(@/assets/img/banner/gmjs_bg18.png);
        background-size: 100% 100%;
        border-radius: 5px;
    }
    :deep(.van-form) {
        // height: 550px;
        // height: 510px;
        flex: 1;
        overflow: scroll;
        box-sizing: border-box;
    }
    .form-box {
        border-radius: 10px;
        // background-color: #fff;
        box-sizing: border-box;
        // padding: 4px;
        margin: 10px;
        .field-title {
            background: #34a8db;
            box-sizing: border-box;
            border-radius: 10px 10px 0px 0px;
            font-size: 18px;
            margin-top: 20px;
            color: #fff !important;
        }
    }
    .uploader-box {
        border-bottom: 1px solid #999999;
        margin: 6px 15px;
        box-sizing: border-box;
        padding: 0px 0;
        height: 180px;
        overflow: hidden;
        img {
            // width: 345px;
            width: 325px;
            height: 180px;
        }
        // 上传图片后图片大小
        :deep(.van-uploader__preview-image) {
            // width: 345px;
            width: 325px;
            height: 180px;
        }
    }
    .uploader-box-2 {
        img {
            width: 80px;
            height: 80px;
        }
    }
    .appointment-time-quantum {
        height: 300px;
        overflow: scroll;
        @include padding-global;
        padding-top: 20px;
        padding-bottom: 20px;
        .appointment-time-quantum-tips {
            font-size: 14px;
            color: red;
            text-align: left;
        }
        .appointment-time-quantum-tip2 {
            padding-top: 10px;
        }
        .appointment-time-quantum-box {
            padding-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .appointment-time-quantum-item {
            margin-top: 10px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 150px;
            border: 1px solid rgb(111, 185, 235);
            font-size: 14px;
        }
    }
    #container,
    #mapDiv {
        width: 0%;
        height: 0%;
    }
    // dialog弹框ui
    :deep(.van-popup.van-popup--center.van-dialog) {
        background-color: none;
        background-image: url('@/assets/img/bg/bg10.png');
        background-size: 100% 100%;
    }
    :deep(.van-hairline--top.van-dialog__footer button) {
        background: none;
    }

    :deep(.form-box .van-radio) {
        padding: 5px;
    }
    :deep(.van-field__label) {
        color: #fff;
    }
</style>
